<template>
  <van-popup :show="show" round class="p-3 bg" @click-overlay="closeModal">
    <div v-if="step == 1">
      <div class="text-center text-blue-600 mb-2 text-xl">选择上传二维码</div>

      <div class="flex flex-col items-center gap-1">
        <button
          v-for="item in codeList"
          :key="item.id"
          @click="selectCode(item)"
          class="border-2 text-white flex justify-start items-center border-white w-full px-4 py-1 rounded-lg bg-[rgba(200,200,200,0.5)]"
        >
          <div
            class="text-white-300 mr-2 flex justify-center items-center rounded-xl bg-red-500 w-8 h-8"
          >
            +
          </div>
          <img :src="item.basicInfo.ico" alt="icon" class="w-10 h-10 mr-2" />
          {{ item.title }}
        </button>
      </div>
    </div>

    <form v-if="step == 2" @submit.prevent="submitAdd" class="w-ful box-border">
      <div class="text-center my-2 font-bold text-xl">{{ codeInfo.title }}</div>
      <van-uploader
        v-model="fileList"
        :max-count="1"
        :after-read="uploadFile"
        class="w-full text-center justify-center"
      >
        <div
          style="min-width: 320px"
          class="h-20 flex justify-center items-center rounded-lg border-2 border-dotted border-black"
        >
          <span class="text-blue-400">点击</span> 上传
          <span></span>
          收款二维码
        </div>
      </van-uploader>

      <van-popover :key="inputItem.id" v-for="(inputItem, index) in codeInfo?.receives.input">
        <div class="p-2 text-sm text-gray-500">{{ inputItem.tip }}</div>
        <template #reference>
          <div class="flex my-2 text-sm">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              {{ inputItem.title }}：
            </div>
            <input
              class="border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="inputItem.tip"
              v-model="formRef.input[index]['value']"
              type="text"
              required
            />
          </div>
        </template>
      </van-popover>

      <KSelect @change="changeCity" v-if="codeInfo?.receives.IntraCity == '1'" />

      <van-popover>
        <div class="p-2 text-sm text-gray-500">{{ codeInfo?.receives.maxMoneyDescribe }}</div>
        <template #reference>
          <div class="flex text-sm my-2" v-if="codeInfo?.receives.maxMoneyStatus == '1'">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              单笔最大金额：
            </div>
            <input
              class="border box-border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="codeInfo?.receives.maxMoneyDescribe"
              type="text"
              v-model="formRef.maxMoney"
              required
            />
          </div>
        </template>
      </van-popover>

      <van-popover>
        <div class="p-2 text-sm text-gray-500">{{ codeInfo?.receives.minMoneyDescribe }}</div>
        <template #reference>
          <div class="flex my-2 text-sm" v-if="codeInfo?.receives.minMoneyStatus == '1'">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              单笔最小金额：
            </div>
            <input
              class="border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="codeInfo?.receives.minMoneyDescribe"
              type="text"
              v-model="formRef.minMoney"
              required
            />
          </div>
        </template>
      </van-popover>

      <van-popover>
        <div class="p-2 text-sm text-gray-500">{{ codeInfo?.receives.limitMoneyDescribe }}</div>
        <template #reference>
          <div class="flex my-2 text-sm" v-if="codeInfo?.receives.limitMoneyStatus == '1'">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              单日限额金额：
            </div>
            <input
              class="border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="codeInfo?.receives.limitMoneyDescribe"
              type="text"
              v-model="formRef.limitMoney"
              required
            />
          </div>
        </template>
      </van-popover>

      <van-popover>
        <div class="p-2 text-sm text-gray-500">{{ codeInfo?.receives.limitNumberDescribe }}</div>
        <template #reference>
          <div class="flex my-2 text-sm" v-if="codeInfo?.receives.limitNumberStatus == '1'">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              收款笔数：
            </div>
            <input
              class="border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="codeInfo?.receives.limitNumberDescribe"
              type="text"
              v-model="formRef.limitNumber"
              required
            />
          </div>
        </template>
      </van-popover>

      <van-popover>
        <div class="p-2 text-sm text-gray-500">{{ codeInfo?.receives.regularNumberDescribe }}</div>
        <template #reference>
          <div class="flex my-2 text-sm" v-if="codeInfo?.receives.regularNumberStatus == '1'">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              收款固额：
            </div>
            <input
              class="border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="codeInfo?.receives.regularNumberDescribe"
              type="text"
              v-model="formRef.regularNumber"
              required
            />
          </div>
        </template>
      </van-popover>

      <div class="flex my-2 text-sm" v-if="codeInfo?.receives.analysisStatus == '1'">
        <div class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded">
          {{ codeInfo?.receives.analysisTitle }}：
        </div>
        <input
          class="border p-2 border-black ml-1 rounded placeholder:text-sm"
          type="text"
          v-model="formRef.analysisSrc"
          required
        />
      </div>

      <div class="text-center my-2 mt-4">
        <button type="submit" class="rounded bg-red-500 text-white text-lg py-1 px-3">
          确认添加
        </button>
      </div>
    </form>
  </van-popup>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCollectionApi, GetBanksApi, AddCollectionApi } from '@/apis/collection'
import { UploadApi } from '@/apis/user'
import KSelect from '@/components/KSelect.vue'
import { showConfirmDialog } from 'vant'
defineProps({
  show: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'confirm'])

const step = ref(1)

const codeList = ref([])
const bankList = ref([])
const codeInfo = ref(null)
const fileList = ref([])
const formRef = ref({
  code: '',
  maxMoney: null,
  minMoney: null,
  limitMoney: null,
  limitNumber: null,
  regularNumber: null,
  agentImgTitle: '',
  agentImgSrc: '',
  province: '',
  city: '',
  analysisSrc: ''
})
onMounted(() => {
  getCollectionApi({ page: 1, pageSize: 100 }).then((res) => {
    codeList.value = res.list
    codeList.value.map((item) => {
      item.code = item.ball.code.toString()
    })
  })
  GetBanksApi({}).then((res) => {
    bankList.value = res.list
  })
})

function selectCode(item) {
  codeInfo.value = item
  formRef.value.input = item.receives.input
  formRef.value.code = item.ball.code
  step.value = 2
}

function uploadFile(file: any) {
  file.status = 'uploading'
  file.message = '上传中...'

  UploadApi(file.file, 1)
    .then((res) => {
      file.status = 'success'
      file.message = '上传成功'
      formRef.value.agentImgSrc = res.file.full_url
      formRef.value.analysisSrc = res.file.analysisSrc
    })
    .catch(() => {
      file.status = 'error'
      file.message = '上传失败'
    })
}

function changeCity(item) {
  formRef.value.province = item.province
  formRef.value.city = item.city
}

function submitAdd() {
  // 判断表单是否填写完毕
  if (
    (!formRef.value.agentImgSrc && codeInfo?.value?.receives.agentImgStatus == '1') ||
    (!formRef.value.code && codeInfo?.value?.receives.codeStatus == '1') ||
    (!formRef.value.province && codeInfo?.value?.receives.provinceStatus == '1') ||
    (!formRef.value.city && codeInfo?.value?.receives.cityStatus == '1')
  ) {
    showConfirmDialog({
      title: '提示',
      message: '请填写完整',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })
    return
  }

  // 删除表单中为null的参数
  for (const key in formRef.value) {
    if (formRef.value[key] == null || formRef.value[key] == '') {
      delete formRef.value[key]
    } else {
      // 删除空格
      console.log(formRef.value[key])
      if (typeof formRef.value[key] == 'string' || typeof formRef.value[key] == 'number') {
        formRef.value[key] = String(formRef.value[key]).trim()
      }
    }
  }

  AddCollectionApi(formRef.value).then(() => {
    showConfirmDialog({
      title: '提示',
      message: '添加成功',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })
      .then(() => {
        emit('confirm')
        step.value = 1
        codeInfo.value = null
      })
      .catch(() => {
        closeModal()
      })
  })
}

function closeModal() {
  emit('close')
  step.value = 1
  codeInfo.value = null
}
</script>
<style scoped>
.delete-button {
  height: 100%;
}
:deep(.van-uploader__wrapper) {
  justify-content: center !important;
}

:deep(.van-popover__wrapper) {
  display: block;
}
/* input::placeholder {
  font-size: 12px;
} */
</style>
